<template>
  <Teleport to="body">
    <div v-if="modelValue && shouldShowDialog" class="global-dialog-overlay" @click="closeOnMaskClick ? handleClose() : null">
      <div class="global-dialog" :class="{ 'global-dialog-large': size === 'large' }" @click.stop>
        <!-- 弹窗头部 -->
        <!-- <div class="dialog-header">
          <h3 class="dialog-title">{{ title }}</h3>
          <button v-if="showClose" class="close-button" @click="handleClose">×</button>
        </div> -->
        <!-- 弹窗内容 -->
        <div class="dialog-content">
          <slot>
            <!-- 默认内容 -->
            <!-- <div v-if="message" class="dialog-message">{{ message }}</div> -->
            <div class="modelContent">
              <div class="bg">
                <div class="tishiIcon" :class="{sc: type === 'sc', sl: type === 'sl'}"></div>
                <div class="titleV">{{title}}</div>
                <div style="height: 16px;"></div>
                <div class="contentV" style="text-align: center; padding: 0 30px;">{{message}}</div>
                <div class="btn-block">
                  <button class="btnV" @click="handleCancel">{{ cancelText }}</button>
                  <button class="btnV btnV-active" @click="handleConfirm">{{ confirmText }}</button>
                </div>
                <!-- 不再提醒选项 - 移动到按钮下方 -->
                <div v-if="showRememberOption" class="remember-option">
                  <label class="remember-checkbox">
                    <input 
                      type="checkbox" 
                      v-model="rememberChecked" 
                      class="checkbox-input"
                    />
                    <span class="checkbox-custom"></span>
                    <span class="remember-text">{{ rememberText }}</span>
                  </label>
                </div>
              </div>
            </div>
          </slot>
        </div>
        <!-- 弹窗底部 -->
        <!-- <div v-if="showFooter" class="dialog-footer">
          <button 
            v-if="showCancel" 
            class="dialog-btn cancel-btn" 
            @click="handleCancel"
          >
            {{ cancelText }}
          </button>
          <button 
            class="dialog-btn confirm-btn" 
            @click="handleConfirm"
          >
            {{ confirmText }}
          </button>
        </div> -->
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useStore } from '@/stores/data';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '提示'
  },
  message: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  closeOnMaskClick: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'default', // 'default' 或 'large'
    validator: (value: string) => ['default', 'large'].includes(value)
  },
  showRememberOption: {
    type: Boolean,
    default: false
  },
  rememberKey: {
    type: String,
    default: ''
  },
  rememberText: {
    type: String,
    default: '不再提醒'
  }
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close']);

// 初始化 store
const store = useStore();

// 不再提醒状态
const rememberChecked = ref(false);

// 检查是否应该显示弹窗
const shouldShowDialog = computed(() => {
  if (props.showRememberOption && props.rememberKey) {
    return !store.getDialogReminder(props.rememberKey); // 使用 store 状态管理
  }
  return true;
});

// 关闭弹窗
const handleClose = () => {
  // 如果用户选择了"不再提醒"，设置本地存储并关闭弹窗，不执行确认操作
  if (props.showRememberOption && props.rememberKey && rememberChecked.value) {
    store.setDialogReminder(props.rememberKey, true);
    return;
  }
  emit('update:modelValue', false);
  emit('close');
};

// 确认操作
const handleConfirm = () => {
  // 如果用户选择了"不再提醒"，设置 store 状态并关闭弹窗，不执行确认操作
  if (props.showRememberOption && props.rememberKey && rememberChecked.value) {
    store.setDialogReminder(props.rememberKey, true);
    handleClose();
    return;
  }
  emit('confirm');
  handleClose();
};

// 取消操作
const handleCancel = () => {
  emit('cancel');
  handleClose();
};

// 监听 ESC 键关闭弹窗
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Escape' && props.modelValue) {
    handleClose();
  }
};

// 添加和移除键盘事件监听
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    document.addEventListener('keydown', handleKeyDown);
    // 禁止背景滚动
    document.body.style.overflow = 'hidden';
  } else {
    document.removeEventListener('keydown', handleKeyDown);
    // 恢复背景滚动
    document.body.style.overflow = '';
  }
});
</script>

<style lang="scss" scoped>
.global-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.global-dialog {
  max-width: 400px;
  overflow: hidden;
  animation: scaleIn 0.3s ease;
  
  &-large {
    max-width: 600px;
  }
  .dialog-content {
    // padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    
    .dialog-message {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #595959;
      line-height: 1.5;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

</style>
<style lang="scss" scoped>
/* 弹窗样式 */
.modelContent {
  width: 378px;
  height: 348px; /* 增加高度以适应底部不再提醒选项向下移动50px */
  padding-top: 32px;
  box-sizing: border-box;
  .bg {
    padding-top: 50px;
    width: 378px;
    height: 246px;
    background: linear-gradient( 180deg, #E4F2FD 0%, #FFFFFF 100%);
    border-radius: 20px 20px 20px 20px;
    position: relative;
    box-sizing: border-box;
  }
  .tishiIcon {
    width: 56px; /* 112rpx / 2 */
    height: 56px; /* 112rpx / 2 */
    background: url(@/assets/images/login/tishi.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 36.5px; /* 73rpx / 2 */
    top: -28px; /* -56rpx / 2 */
  }
  
  .tishiIcon.sc {
    background: url(@/assets/images/login/tishi_sc.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .tishiIcon.sl {
    background: url(@/assets/images/login/tishi_sl.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .titleV {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 21px; /* 42rpx / 2 */
    color: #1A1A1A;
    text-align: center;
  }
  
  .contentV {
    padding: 0 37.5px; /* 75rpx / 2 */
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px; /* 28rpx / 2 */
    color: #595959;
    margin-bottom: 41px;
    text {
      color: #006CFF;
    }
  }
  .btn-block {
    width: 100%;
    display: flex;
    padding: 0 27px; /* 54rpx / 2 */
    justify-content: space-between;
    margin-bottom: 36px; /* 72rpx / 2 */
    box-sizing: border-box;
    .btnV {
      width: 150px;
      height: 44px;
      background: #F5F6F9;
      border-radius: 19px; /* 38rpx / 2 */
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px; /* 28rpx / 2 */
      color: #BFBFBF;
    }
    
    .btnV-active {
      background: linear-gradient(90deg, #006CFF 0%, #009FFF 100%);
      border-radius: 26px; /* 52rpx / 2 */
      font-weight: 500;
      color: #FFFFFF;
    }
  }
  
  .btn-block.one {
    justify-content: center;
    
    button {
      width: 213px; /* 426rpx / 2 */
    }
  }
  
  /* 不再提醒选项样式 - 底部位置 */
  .remember-option {
    padding: 0 30px;
    margin-top: 60px; /* 向下移动60px */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    
    .remember-checkbox {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #FFFFFF; /* 字体颜色改为白色 */
      
      .checkbox-input {
        display: none;
      }
      
      .checkbox-custom {
        width: 16px;
        height: 16px;
        border: 1px solid #FFFFFF; /* 边框颜色改为白色 */
        border-radius: 50%; /* 修改为圆形 */
        margin-right: 8px;
        position: relative;
        transition: all 0.3s ease; /* 添加过渡动画 */
        
        &::after {
          content: '';
          position: absolute;
          display: none;
          left: 50%;
          top: 50%;
          width: 10px; /* 增大选中点大小 */
          height: 10px; /* 增大选中点大小 */
          background: #006CFF; /* 选中点颜色改为蓝色 */
          border-radius: 50%; /* 选中点也为圆形 */
          transform: translate(-50%, -50%);
        }
      }
      
      .checkbox-input:checked + .checkbox-custom {
        background: #FFFFFF; /* 选中背景改为白色 */
        border-color: #FFFFFF; /* 选中边框改为白色 */
        
        &::after {
          display: block;
        }
      }
      
      .remember-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF; /* 字体颜色改为白色 */
      }
    }
  }
}
</style>